<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊呗</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            overflow: hidden;
        }

        /* 心形样式 */
        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff69b4;
            transform: rotate(45deg);
            animation: fall linear infinite;
            z-index: 1;
        }

        .heart:before,
        .heart:after {
            content: '';
            width: 20px;
            height: 20px;
            background: inherit;
            border-radius: 50%;
            position: absolute;
        }

        .heart:before {
            left: -10px;
        }

        .heart:after {
            top: -10px;
        }

        @keyframes fall {
            0% {
                transform: rotate(45deg) translateX(0) translateY(-100vh);
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateX(100px) translateY(100vh);
                opacity: 0;
            }
        }

        /* 烟花样式 */
        .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: explode 1.2s ease-out forwards;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        @keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(40);
                opacity: 0;
            }
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: shoot 1.2s ease-out forwards;
            box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        @keyframes shoot {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(var(--tx)) translateY(var(--ty));
                opacity: 0;
            }
        }

        #registerForm {
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 2;
            backdrop-filter: blur(10px);
            max-width: 400px;
            margin: 50px auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .input-label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }

        input[type="text"], input[type="password"] {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: calc(100% - 26px);
        }

        .submit-btn {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            font-size: 16px;
        }

        .submit-btn:hover {
            background: #0056b3;
        }

        .avatar-group {
            margin-bottom: 15px;
        }

        .avatar-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: bold;
        }

        .avatar-options {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .avatar-option {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            padding: 2px;
        }

        .avatar-option:hover {
            border-color: #007bff;
        }

        .avatar-option.selected {
            border-color: #28a745;
        }

        .avatar-option img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .switch-form {
            text-align: center;
            margin-top: 10px;
        }

        .switch-form a {
            color: #007bff;
            text-decoration: none;
            cursor: pointer;
        }

        .switch-form a:hover {
            text-decoration: underline;
        }

        .error-message {
            color: #dc3545;
            margin-top: 5px;
            font-size: 14px;
        }

        .required-field {
            color: #dc3545;
            margin-left: 4px;
        }

        .field-tip {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="registerForm">
            <h2>用户注册</h2>
            <div class="form-group">
                <label class="input-label">用户名<span class="required-field">*</span></label>
                <input type="text" id="registerUsername" placeholder="请输入用户名" required>
                <div class="field-tip">用户名将显示在聊天室中</div>
            </div>
            <div class="form-group">
                <label class="input-label">密码<span class="required-field">*</span></label>
                <input type="password" id="registerPassword" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
                <label class="input-label">确认密码<span class="required-field">*</span></label>
                <input type="password" id="confirmPassword" placeholder="请再次输入密码" required>
            </div>
            <div class="avatar-group">
                <label class="avatar-label">选择头像<span class="required-field">*</span></label>
                <div class="avatar-options">
                    <div class="avatar-option" data-avatar="default">
                        <div style="width: 100%; height: 100%; background: #1aad19; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">A</div>
                    </div>
                    <div class="avatar-option selected" data-avatar="star.jpg">
                        <img src="/static/star.jpg" alt="星星头像">
                    </div>
                    <div class="avatar-option" data-avatar="cat.jpg">
                        <img src="/static/cat.jpg" alt="猫咪头像">
                    </div>
                    <div class="avatar-option" data-avatar="dog.png">
                        <img src="/static/dog.png" alt="狗狗头像">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button type="button" class="submit-btn" onclick="register()">立即注册</button>
            </div>
            <div class="switch-form">
                已有账号？<a href="/">立即登录</a>
            </div>
            <div id="registerError" class="error-message"></div>
        </div>
    </div>

    <script>
        // 心形流星雨
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            
            heart.style.left = Math.random() * window.innerWidth + 'px';
            
            const size = Math.random() * 15 + 10;
            heart.style.width = size + 'px';
            heart.style.height = size + 'px';
            
            const duration = Math.random() * 2 + 2;
            heart.style.animationDuration = duration + 's';
            
            const colors = [
                '#ff69b4', // 热粉红
                '#ffb6c1', // 浅粉红
                '#ffc0cb', // 粉红
                '#ff1493', // 深粉红
                '#ff82ab'  // 亮粉红
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            heart.style.background = color;
            
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, duration * 1000);
        }

        // 创建烟花
        function createFirework() {
            const firework = document.createElement('div');
            firework.className = 'firework';
            
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * (window.innerHeight * 0.6);
            firework.style.left = x + 'px';
            firework.style.top = y + 'px';

            const colors = [
                '#FF3232', // 鲜红色
                '#FF4500', // 红橙色
                '#FFD700', // 金色
                '#FFFFFF', // 纯白色
                '#FFA500', // 橙色
                '#FF69B4'  // 粉红色
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            firework.style.backgroundColor = color;

            document.body.appendChild(firework);

            // 创建烟花粒子
            for (let i = 0; i < 40; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.backgroundColor = color;

                const angle = (i / 40) * Math.PI * 2;
                const velocity = 150 + Math.random() * 100;
                particle.style.setProperty('--tx', Math.cos(angle) * velocity + 'px');
                particle.style.setProperty('--ty', Math.sin(angle) * velocity + 'px');

                document.body.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, 1200);
            }

            setTimeout(() => {
                firework.remove();
            }, 1200);
        }

        // 定时创建效果
        setInterval(createHeart, 150);    // 心形
        setInterval(createFirework, 1000); // 烟花

        let selectedAvatar = 'star.jpg';  // 默认选中的头像

        // 添加头像选择的事件监听
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.avatar-option').forEach(option => {
                option.addEventListener('click', function() {
                    // 移除其他选项的选中状态
                    document.querySelectorAll('.avatar-option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                    // 保存选中的头像
                    selectedAvatar = this.getAttribute('data-avatar');
                    console.log('Selected avatar:', selectedAvatar); // 添加调试日志
                });
            });
        });

        async function register() {
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (!username || !password || !confirmPassword) {
                document.getElementById('registerError').textContent = '请填写所有必填字段';
                return;
            }

            if (!selectedAvatar) {
                document.getElementById('registerError').textContent = '请选择头像';
                return;
            }

            if (password !== confirmPassword) {
                document.getElementById('registerError').textContent = '两次输入的密码不一致';
                return;
            }

            try {
                console.log('Registering with avatar:', selectedAvatar); // 添加调试日志
                const response = await fetch('/api/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ 
                        username, 
                        password,
                        avatar: selectedAvatar
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    window.location.href = '/';  // 注册成功后跳转到登录页面
                } else {
                    document.getElementById('registerError').textContent = data.message;
                }
            } catch (error) {
                document.getElementById('registerError').textContent = '注册失败，请稍后重试';
                console.error('Register error:', error);
            }
        }
    </script>
</body>
</html> 